<template>
    <el-container class="bg-white rounded" :style="{ height:h+'px'}">
      <el-header class="image-header">
        <el-button type="primary" size="small" @click="handleOpenCreate">
            新增图片分类
        </el-button>
        <el-button type="warning" size="small" @click="handleUpload">
            上传图片
        </el-button>
      </el-header>
      <el-container>
          <ImageAside ref="ImageAsideRef" @change="handleAsideChange"/>
          <ImageMain ref="ImageMainRef"/>
      </el-container>
    </el-container>
</template>

<script setup>
import { ref } from 'vue'
// 引入分离后的组件
import ImageAside from '~/components/ImageAside.vue'
import ImageMain from '~/components/ImageMain.vue'


// 计算浏览器高度
const windowHeight = window.innerHeight || document.body.clientHeight
const h = windowHeight -64 -44 -40

// 接收子组件过来的参数
const ImageAsideRef = ref(null)

// 调用新增或修改图片打开抽屉方法
const handleOpenCreate = () => ImageAsideRef.value.handleCreate()

// 调用打开上传图片抽屉方法
const handleUpload = () => ImageMainRef.value.upLoadFileOpen()

// 接收子组件传过来的参数
const ImageMainRef = ref(null)

// 用子组件方法渲染右侧图片列表
const handleAsideChange = (image_class_id) => ImageMainRef.value.loadImageData(image_class_id)

</script>

<style scoped>
/* 配合position属性和overflow属性，实现滚动条 */
.image-header{
    border-bottom: 1px solid #eeeeee;
    @apply flex items-center;
}

</style>
